<template>
	<!-- 社交-我的 -->
	<view class="socialize_my_box">
		<view class="my_bg"></view>
		<view class="user_info">
			<view class="top">
				<image src="https://admin.gonghe.group/static/img/banner6.png" mode="" class="avatar"></image>
				<view class="edit_info">
					<view class="btn">
						<text>编辑信息</text>
					</view>
				</view>
			</view>
			
			<view class="info_down">
				<text class="username">LEITE295</text>
				<text style="margin-top: 17rpx;">20岁·177cm·60kg·女  </text>
				<text style="margin: 24rpx; 20rpx 0">3.12km</text>
				<view class="fans">
					<text>关注 </text><text style="color: #343434; margin-left: 8rpx; font-weight: 600;">66</text>
					<text style="margin-left: 90rpx;">粉丝 </text><text style="color: #343434;margin-left: 8rpx; font-weight: 600;">66</text>
				</view>
				<view class="sign">
					<text style="margin-right: 20rpx;">愿一生温暖纯良，不舍爱与自由</text>
					<u-icon name="edit-pen" color="#313131" size="24rpx"></u-icon>
				</view>
				
			</view>
			
			
		</view>
	
		<view class="user_menu">
			<view class="menu_list">
				<view class="menu_item" :class="{'current': current == index}" v-for="(item,index) in menuList" @click="menuClick(index)">
					<text>{{ item.name }}</text>
					<view class="icon"></view>
				</view>
			</view>
			
			<view class="menu_count_box">

				<Album v-if="current == 0"></Album>
				<text v-if="current == 1">拼房</text>
				<text v-if="current == 2">资料</text>
			</view>
		</view>
	
	</view>
</template>

<script>
	import Album from '@/components/socialize_distance/album.vue'
	export default {
		data() {
			return {
				menuList: [
					{
						name: "相册"
					},
					{
						name: "拼房"
					},
					{
						name: "资料"
					},
				],
				current: 0
			}
		},
		methods: {
			menuClick(e) {
				this.current = e
			}
		},
		components: {
			Album 
		}
	}
</script>

<style lang="scss"> 
	.socialize_my_box {
		position: relative;
		background-color: #fff;
		.my_bg {	
			width: 100%;
			height: 235rpx;
			background: url(http://www.jiubakeji.cn/images/socialize_my_bg.png) no-repeat;
			background-size: 750rpx;
		}
		
		.user_info {
			position: absolute;
			left: 0;
			top: 177rpx;
			width: 100%;
			padding: 0 56rpx;
			box-sizing: border-box;
			
			.top {
				display: flex;
				justify-content: space-between;
				.avatar {
					width: 108rpx;
					height: 108rpx;
					border: 3rpx solid #FFFFFF;
					border-radius: 50%;
				}
				
				.edit_info {
					padding-top: 79rpx;
					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 150rpx;
						height: 50rpx;
						font-size: 24rpx;
						color: #2359ED;
						border: 1rpx solid #2359ED;
						border-radius: 25rpx;
					}
					
				}
			}
			
			.info_down {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #5F5F5F;
				.username {
					margin-top: 3rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #000000;
				}
			
				.fans {
					margin-top: 30rpx;
					color: #535353;
				}
				
				.sign {
					display: flex;
					align-items: flex-end;
					margin-top: 25rpx;
				}
				
			}
			
			
		}
		
		.user_menu {
			margin-top: 425rpx;
			padding: 0 20rpx;
			z-index: 9999;
			.menu_list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.menu_item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					flex: 1;
					height: 52rpx;	
					font-size: 28rpx;
					color: #2C2C2C;
					.icon {
						width: 26rpx;
						height: 5rpx;
						background-color: #fff;
						border-radius: 2rpx;
					}
					
				}
				.current {
					font-size: 30rpx;
					font-weight: 500;
					.icon {
						background-color: #2359ED;
					}
				}
				
			}
			
			.menu_count_box {
				margin-top: 25rpx;
				
			}
			
			
		}
		
	}
</style>
